<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>人脸识别——首页</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>
<body>
<div class=" page-home app-page">
    <div class="app-page-content">
        <div class="data app-card">
            <div class="app-card-body">
                <div class="z-btn-group">
                    <button type="button" class="z-btn z-face" data-id="0">今天</button>
                    <button type="button" class="z-btn z-face" data-id="1">昨天</button>
                    <button type="button" class="z-btn z-face" data-id="2">近七天</button>
                    <button type="button" class="z-btn z-face" data-id="3">近三十天</button>
                </div>
            </div>
            <div class="app-card-body">
                <div class="data-item">
                    <div class="title">曝光次数</div>
                    <div class="number"></div>
                </div>
                <div class="data-item">
                    <div class="title">触达人次</div>
                    <div class="number"></div>
                </div>
                <div class="data-item">
                    <div class="title">观看人次</div>
                    <div class="number"></div>
                </div>
                <div class="data-item">
                    <div class="title">平均观看时长(s)</div>
                    <div class="number"></div>
                </div>
                <div class="data-item">
                    <div class="title">点位数</div>
                    <div class="number"></div>
                </div>
            </div>
        </div>
        <!--曝光数-->
        <div class="app-card show">
            <div class="app-card-body">
                <div class="echarts" id="home-exposureRate"></div>
            </div>
        </div>
        <!--触达人次和观看人次-->
        <div class="app-card show">
            <div class="app-card-body">
                <div class="echarts" id="home-rw"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/lib/echarts/echarts.common.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        //获取context path
        var context = $("meta[name='ctx']").attr("content") || '';
        var data = [];
        //统计对象
        var number = {};

        var etwurl = "/index/listAdvertisementMonitorSum";
        if (context) {
            etwurl = context + etwurl;
        }

        //更新data-item统计表的值
        var dataItem = $(".data-item");
        var btn = $(".z-btn");
        //利用ajax从后台获取data-item的数据
        var btnFirst=btn.eq(0);
        post(btnFirst,etwurl,0);
        function setValue() {
            dataItem.eq(0).children(".number").html(number.exposuresSum);
            dataItem.eq(1).children(".number").html(number.touchSum);
            dataItem.eq(2).children(".number").html(number.watchSum);
            dataItem.eq(3).children(".number").html(number.watchAvg);
            dataItem.eq(4).children(".number").html(number.deviceNum);
        }
        //   创建echarts实例曝光数
        var exposureRate = echarts.init(document.getElementById("home-exposureRate"));
        var eOption = {
            title: {
                text: ["曝光数"],
                left: "left",
            },
            legend: {
                data: ["曝光数"],
                icon: "bar",
                itemWidth: 14,
                selectedMode: false,
            },
            dataset: {
                dimensions: ["time", "exposuresSum", "touchSum", "watchSum"],
                source: [],
            },
            xAxis: {
                type: "category",
            },
            yAxis: {},
            series: [{
                name: "曝光数",
                type: "line",
                color: " #8260cf",
                encode: {
                    y: "exposuresSum"
                }
            }]
        }


        //创建echarts实例触达人次和观看人次
        var rw = echarts.init(document.getElementById("home-rw"));
        //    配置触达人次和观看人次选项
        var rwOption = {
            title: {
                text: ["触达人次/观看人次",],
                left: "left",
            },
            legend: {
                data: ["触达人次", "观看人次"],
                icon: "bar",
                itemWidth: 14,
                selectedMode: false,
                bottom: "bottom"
            },
            dataset: {
                dimensions: ["time", "exposuresSum", "touchSum", "watchSum"],
                source: [],
            },
            xAxis: {
                type: "category",
            },
            yAxis: {},
            series: [{
                name: "触达人次",
                type: "line",
                color: "#2062e6",
                encode: {
                    y: "touchSum"
                }
            }, {
                name: "观看人次",
                type: "line",
                color: "#ff8533",
                encode: {
                    y: "watchSum"
                }
            },]
        }
        var url = "/index/listExposuresTouchWatchSum";
        if (context) {
            url = context + url;
        }
        //利用ajax从后台获取统计表的数据
        $.ajax({
            type: "post",
            url: url,
            async: true,
            dataType: "json",
            success: function (result) {
                console.log(result);
                if (result) {
                    $(".show").removeClass("show");
                    //赋值data
                    data = result.data;
                    //给dataset赋值
                    eOption.dataset.source = data;

                    //更新图表
                    exposureRate.setOption(eOption);
                    //    初始化数据集
                    rwOption.dataset.source = data;
                    //    更新图表
                    rw.setOption(rwOption);
                } else {
                    console.error("返回result不存在");
                }
            }
        });

        //    ajax更新统计数据
        btn.each(function () {
            $(this).click(function () {
                var _this=$(this);
                console.log(_this.attr("data-id"));
                var datatype = _this.attr("data-id");
                /*var amsurl = "/index/listAdvertisementMonitorSum";
                if (context) {
                    amsurl = context + amsurl;
                }*/
                post(_this,etwurl,datatype);
            })
        })
        function post(btn,url,dataId) {
            $.ajax({
                type: "post",
                url: url,
                async: true,
                dataType: "json",
                data: {dateType: dataId},
                success: function (result) {
                    //按钮变色
                    btn.addClass("z-selected").siblings().removeClass("z-selected");
                    console.log(result);
                    if (result.code==0) {
                        // result = JSON.parse(result);
                        number = result.data;
                        setValue();
                    } else {
                        popup.tips(result.msg)
                    }
                }
            })
        }
    })
</script>
</body>
</html>